<template>
  <div class="footer">
    <div class="footer_wrap">
      <div class="top">
        <ul>
          <li>
            <a
              class="logo logonew logo-openplatform f-tid"
              href="https://developer.music.163.com/st/developer"
              target="_blank"
            ></a>
            <span class="tt">音乐开放平台</span>
          </li>
          <li>
            <a
              class="logo logonew logo-trade f-tid"
              href="//music.163.com/st/web-sublicense/home"
              target="_blank"
            ></a>
            <span class="tt">云村交易所</span>
          </li>
          <li>
            <a
              class="logo logonew logo-amped f-tid"
              href="https://web-amped.music.163.com/"
              target="_blank"
            ></a>
            <span class="tt">Amped Studio</span>
          </li>
          <li>
            <a
              class="logo logonew logo-auth f-tid"
              href="//music.163.com/st/userbasic#/auth"
              target="_blank"
            ></a>
            <span class="tt">用户认证</span>
          </li>
          <li>
            <a
              class="logo logonew logo-musician f-tid"
              href="//music.163.com/st/ad-cms-bills/mlogin?from=mainStation"
              target="_blank"
            ></a>
            <span class="tt">音乐交易平台</span>
          </li>
          <li>
            <a
              class="logo logonew logo-reward f-tid"
              href="//music.163.com/web/reward"
              target="_blank"
            ></a>
            <span class="tt">赞赏</span>
          </li>
          <li>
            <a
              class="logo logonew logo-cash f-tid"
              href="//music.163.com/st/ncreator/revenue-plan"
              target="_blank"
            ></a>
            <span class="tt">视频激励</span>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <p class="link" id="music-link">
          <a
            href="//st.music.163.com/official-terms/service"
            target="_blank"
            class="item s-fc3"
            >服务条款</a
          ><span class="line">|</span>
          <a
            href="//st.music.163.com/official-terms/privacy"
            target="_blank"
            class="item s-fc3"
            >隐私政策</a
          ><span class="line">|</span>
          <a
            href="//st.music.163.com/official-terms/children"
            target="_blank"
            class="item s-fc3"
            >儿童隐私政策</a
          ><span class="line">|</span>
          <a
            href="//music.163.com/st/staticdeal/complaints.html"
            target="_blank"
            class="item s-fc3"
            >版权投诉</a
          ><span class="line">|</span>
          <a href="http://ir.music.163.com" target="_blank" class="item s-fc3"
            >投资者关系</a
          ><span class="line">|</span>
          <a
            href="https://music.163.com/ui/resource"
            rel="noopener noreferrer"
            target="_blank"
            class="item s-fc3"
            >广告合作</a
          >
          <span class="line">|</span>
          <a
            onclick="nm.x.biLog('click', {mspm:'61f261f4b99b0d5882ce3a78',page:'web_netease_music_homepage',target:'base_fast_access'});return true;"
            href="//mp.music.163.com/600948c936c13f4d09752e73/contact-us-web/index.html?source=Music-Main-Station"
            target="_blank"
            class="s-fc3"
            >联系我们</a
          >
        </p>
        <p class="right s-fc3">
          <a
            href="https://jubao.163.com"
            target="_blank"
            class="sep alink s-fc3"
            >廉正举报</a
          >
          <span class="sep span"
            >不良信息举报邮箱: 51jubao@service.netease.com</span
          >
          <span class="span">客服热线：95163298</span>
        </p>
        <p class="right s-fc3">
          <span class="span">互联网宗教信息服务许可证：浙（2022）0000120</span>
          <span class="span">增值电信业务经营许可证：浙B2-20150198</span>
          <a
            href="https://beian.miit.gov.cn/#/Integrated/index"
            rel="noopener noreferrer"
            target="_blank"
            class="alink s-fc3"
            >粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a
          >
        </p>
        <p class="right s-fc3">
          <span class="sep span">网易公司版权所有©1997-2023</span
          ><span class="span">杭州乐读科技有限公司运营：</span
          ><a
            href="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/8282703158/452a/ca0c/3a10/caad83bc8ffaa850a9dc1613d74824fc.png"
            target="_blank"
            class="alink s-fc3"
            >浙网文[2021] 1186-054号</a
          >
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564"
            rel="noopener noreferrer"
            target="_blank"
            class="alink s-fc3 police-link"
          >
            <span class="police-logo"></span>
            <span class="police-text">浙公网安备 33010902002564号</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.footer {
  padding-bottom: 40px;
  height: 325px;
  border-top: 1px solid #d3d3d3;
  background: #f2f2f2;
  .footer_wrap {
    width: 980px;
    margin: 0 auto;
    .top {
      ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 33px;
        .logonew {
          display: block;
          float: none;
          width: 45px;
          height: 45px;
          margin: 0 auto;
        }
      }
    }
    .bottom {
      padding-top: 60px;
      line-height: 24px;
      margin: 0 auto;
      text-align: center;
      color: #666;
      font-size: 12px;
    }
  }
}
.police-logo {
  width: 14px;
  height: 14px;
  background: url("@/assets/images/police.png") no-repeat;
  background-size: cover;
  display: inline-block;
  margin-right: 2px;
  vertical-align: -2px;
}
.police-link {
  margin-left: 5px;
  font-size: 0;
}
.police-text {
  font-size: 12px;
}
a {
  color: #666;
}
a:hover {
  text-decoration: underline;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.sep {
  margin-right: 14px;
}
.line {
  margin: 0 8px 0 8px;
  color: #d9d9d9;
}
.logo.logonew {
  background: url("@/assets/images/foot_enter_new2.png") no-repeat;
  background-size: 220px 220px;
}
.logonew.logo-openplatform {
  background-position: -170px -5px;
}
.logonew.logo-openplatform:hover {
  background-position: -5px -115px;
}
.logonew.logo-trade {
  background-position: -5px -170px;
}
.logonew.logo-trade:hover {
  background-position: -60px -170px;
}
.logonew.logo-amped {
  background-position: -5px -60px;
}
.logonew.logo-amped:hover {
  background-position: -60px -5px;
}
.logonew.logo-auth {
  background-position: -60px -60px;
}
.logonew.logo-auth:hover {
  background-position: -115px -5px;
}
.logonew.logo-musician {
  background-position: -115px -115px;
}
.logonew.logo-musician:hover {
  background-position: -5px -5px;
}
.logonew.logo-reward {
  background-position: -170px -115px;
}
.logonew.logo-reward:hover {
  background-position: -60px -115px;
}
.logonew.logo-cash {
  background-position: -170px -60px;
}
.logonew.logo-cash:hover {
  background-position: -115px -60px;
}
.tt {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}
</style>
